<template>
    <div class="home_part">
        <el-container>
            <el-aside :width=" isCollapse === true? '70px' : '200px' ">
                <div class="logo"><span class="iconfont icon-feiji"></span><strong v-show="isCollapse === false"></strong></div>
                    <el-menu router   :collapse="isCollapse">
                        <el-submenu :index="String(index)" v-for="(items, index) in menu" :key="index">
                            <template slot="title">
                                <i :class="items.icon"></i>
                                <span>{{items.title}}</span>
                            </template>
                            <el-menu-item :index="item.link" v-for=" item in items.child" :key="item.link"><i :class="item.icon"></i>{{item.title}}</el-menu-item>
                        </el-submenu>
                    </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <span 
                    :class="isCollapse === true? 'iconfont icon-cela-copy left' : 'iconfont icon-cela left' " 
                    @click="isCollapse = !isCollapse">
                    订单后台管理系统
                    </span>
                    
                    <div class="right" @mouseenter="isShow = !isShow" @mouseleave="isShow = !isShow" >
                        <span>超级管理员</span>
                        <i class="iconfont icon-cecaidanxiala"></i>
                        <ul class="user" v-show="isShow">
                            <li>设置</li>
                            <li>个人中心</li>
                            <li> <a href="/out">退出</a></li>
                        </ul>
                    </div>
                </el-header>
                <el-main>
                    <div class="home"><router-link tag="strong" to="/">首页</router-link><i class="iconfont icon-zuocecaidanjiantou"></i><strong>{{$store.state.title}}</strong></div>
                    <router-view></router-view>
                </el-main>
            </el-container>
    </el-container>
    </div>
</template>
<style lang="scss">
    .home_part {
        height: 100%;
        .el-container{
            height: 100%;
            .el-aside {
                transition: width .5s;
                height: 100%;
                background-color: #fff;
                .logo {
                    display: flex;
                    align-items: center;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    justify-content: center;
                    span {
                        font-size: 40px;
                        color: rgb(63, 63, 63);
                        
                    }
                }
                .el-menu {              
                    border: 0;
                    .el-submenu {
                        .el-menu-item {
                            i {
                                margin-right: 10px;
                            }
                        }
                    }
                }
            }
            .el-header {
                display: flex;
                justify-content: space-between;
                height: 65px;
                line-height: 65px;
                background-color: #fff;
                border-left: 2px solid rgb(63, 63, 63);
                .left {
                    font-size: 25px;
                    color: rgb(63, 63, 63);
                    cursor: pointer;
                }
                .right {
                    position: relative;
                    cursor: pointer;
                    .user {
                        position: absolute;
                        z-index: 999;
                        left: -20px;
                        top: 55px;
                        li {
                            cursor: pointer;
                            padding: 0 20px;
                            text-align: left;
                            line-height: 30px;
                            &:hover {
                                border-bottom: 1px solid #ccc;
                            }
                        }
                    }
                }
            }
            .el-main {
                background-color: #fff;
                border-left: 2px solid rgb(63, 63, 63);
                border-top: 2px solid rgb(63, 63, 63);
                padding-left: 30px;
                .home {
                    font-size: 15px;
                     margin-bottom: 30px;
                    strong {
                        cursor: pointer;
                    }
                    i {
                         font-size: 12px;
                         margin: 0 5px;
                    }
                }
                .el-table__header,
                .el-table__body {
                    width: 1700px !important;
                    margin-right: 0 !important;
                }
                
            }
        }
    }

</style>

<script>
export default {
    data() {
        return {
            isCollapse: false,
            isShow: false,
            
            menu: [ 
                // 基础管理
                {
                    title: '基础管理',
                    icon: 'iconfont icon-jichuguanli1',
                    child: [
                        {title: '商品管理', link: '/basics/wares/1', icon: 'iconfont icon-shangpinguanli'},
                    ]
                },
                // 订单管理
                {
                    title: '订单管理',
                    icon: 'iconfont icon-order1',
                    child: [
                        {title: '交易订单', link: '/order/order/1', icon: 'iconfont icon-jiaoyidingdan'},
                    ]
                },
                // 系统管理
                {
                    title: '系统管理',
                    icon: 'iconfont icon-jichuguanli1',
                    child: [
                        {title: '用户管理', link: '/system/user/1', icon: 'iconfont icon-c-users'},
                        // {title: '菜单管理', link: '/system/menu', icon: 'iconfont icon-caidanguanli'},
                        {title: '角色管理', link: '/system/role/1', icon: 'iconfont icon-jiaoseguanli'},
                        {title: '公司管理', link: '/system/company/1', icon: 'iconfont icon-gongsiguanli'},
                        {title: '权限管理', link: '/system/power/1', icon: 'iconfont icon-caidanguanli'},

                    ]
                },

                {
                    title: ' 支付管理',
                    icon: 'iconfont icon-zhifu',
                    child: [
                        {title: '支付配置信息', link: '/pay/payinfo/1', icon: 'iconfont icon-zhifupeizhi'},
                        {title: '支付配置', link: '/pay/pays/1', icon: 'iconfont icon-zhifupeizhi'},
                    ]
                },
                
                {
                    title: '图表管理',
                    icon: 'iconfont icon-tubiao',
                    child: [
                        {title: '数据可视化', link: '/', icon: 'iconfont icon-tubiao'},
                       
                    ]
                }
            ],
        }
    },
    methods: {
        // 退出
        // out() {
        //     this.$http.get('/out') 
        //         .then(({ data }) => {
        //             if(!data.errno) {
        //                 this.$router.go(0)
        //             }
        //         }) 
        // }
    }
}
</script>